<template>
	<!-- 演员筛选 -->
	<SkeletonScreen v-if="loading"></SkeletonScreen>
	<view>
		<my-scroll-navbar @TagIndex="sortFunction" :list="sortValue" :isNav="false" :isIcon="false"></my-scroll-navbar>
		<my-scroll-navbar v-if="sortValue[0].name" @TagIndex="genderFunction" :isNav="false" :list="genderValue"
			:isIcon="false"></my-scroll-navbar>
	</view>
	<!-- 演员图片 -->
	<view class="image-eight-Three">
		<navigator class="actor" :url="`/pages/actors/actors?id=${item.id}`" v-for="item in actorValue">
			<image class="img" :src="item.url"></image>
			<view class="name">{{item.name}}</view>
		</navigator>
	</view>
	<view style="display: flex; justify-content: center; align-items: center; padding: 30rpx 0; color: #464646;">
		<view>到此为止...</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		actorlist,
		CollectionYurt
	} from '@/API/actorApis.js';
	import {
		onReachBottom
	} from '@dcloudio/uni-app';
	const loading = ref(true)

	const actorValue = ref([]); //演员信息

	const nextPage = ref(1); //下一页

	const gender = ref(0); //性别
	const sort = ref(0); //区域

	const sortValue = ref([]);
	const genderValue = ref([{
			id: 1,
			name: '全部',
			typeId: 0
		},
		{
			id: 2,
			name: '男',
			typeId: 1
		},
		{
			id: 3,
			name: '女',
			typeId: 2
		}
	]);


	// 演员信息
	const actorFunction = async (pageNum, sort, gender) => {
		let res = await actorlist(pageNum, sort, gender);
		actorValue.value = actorValue.value.concat(res.list);
		nextPage.value = res.nextPage;
		console.log("演员：", res.list);
		loading.value = false
	}

	// 区域信息
	const CollectionYurtFunction = async () => {
		let res = await CollectionYurt();
		sortValue.value = res;
		console.log("区域：", res);

	}

	function sortFunction(e) {
		console.log("sortId:", e.item.typeId);
		sort.value = e.item.typeId;
		nextPage.value = 1;
		actorValue.value = [];
		console.log(nextPage.value, sort.value, gender.value)
		actorFunction(nextPage.value, sort.value, gender.value);
	};

	function genderFunction(e) {
		console.log("genderId:", e.item.typeId);
		gender.value = e.item.typeId;
		nextPage.value = 1;
		actorValue.value = [];
		console.log(nextPage.value, sort.value, gender.value)
		actorFunction(nextPage.value, sort.value, gender.value);
	};

	//区域信息
	CollectionYurtFunction();
	// 演员信息
	actorFunction(nextPage.value, sort.value, gender.value);

	// 触底刷新
	onReachBottom(() => {
		if (nextPage.value > 0) {
			actorFunction(nextPage.value, sort.value, gender.value);
			console.log("触底了");
		}

	})
</script>

<style scoped lang="scss">
	.image-eight-Three {
		box-sizing: border-box;
		padding: 30rpx;
		padding-top: 0;
		display: grid;
		gap: 15rpx;
		grid-template-columns: repeat(4, 1fr);

		.actor {
			height: 200rpx;
			position: relative;
			padding: 30rpx 0;

			.img {
				width: 100%;
				height: 100%;
				border-radius: 15rpx;
				background-color: #969696;
			}

			.name {
				max-width: 150rpx;
				padding: 5rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 22rpx;
			}
		}
	}
</style>